<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>查看个人信息</title>

<link rel="stylesheet"
	href="assets/css/bootstrap-datetimepicker.min.css">

<%-- 全站样式 --%>
<jsp:include page="/WEB-INF/jsps/template_style.jsp"></jsp:include>
<script type="text/javascript"
	src="/spectrum3/src/main/webapp/assets/js/datepicker/jquery-3.1.1.min.js"></script>
</head>
<body class="page-body skin-navy">

	<!-- 显示错误信息 -->
	<c:if test="${!empty message }">
		<script type="text/javascript">
			alert("${message}");
		</script>
	</c:if>

	<div class="page-container">
		<%--侧边栏 --%>
		<jsp:include page="/WEB-INF/jsps/sidebar.jsp"></jsp:include>
		<div class="main-content">
			<%--导航栏 --%>
			<jsp:include page="/WEB-INF/jsps/navbar.jsp"></jsp:include>

			<div class="page-title">
				<div class="title-env">
					<h1 class="title">查看个人信息</h1>
					<p class="description">用户可以在此页面上，查看个人信息（用户近期动态显示）</p>
				</div>
			</div>
			<c:forEach items="${data }" var="user">
				<section class="profile-env">
				<div class="row">
					<div class="col-sm-3">
						<!-- User Info Sidebar -->
						<div class="user-info-sidebar">
							<a href="#" class="user-img"> <img
								src="assets/images/user-4.png" alt="user-img"
								class="img-cirlce img-responsive img-thumbnail" />
							</a> <a href="#" class="user-name"> ${user['name'] } <span
								class="user-status is-online"></span>

							</a><br /> <span class="user-title"> 性别：${user['sex']==1?"男":"女" } </span> <span
								class="user-title" id="birthday"> ${user['birthday'] } </span>


							<hr />
							<ul class="list-unstyled user-info-list" id="personAddress">

								<c:forEach items="${user['personAddress'] }" var="address">

									<li><i class="fa-home">${address }</i></li>


								</c:forEach>
							</ul>
							<hr />
						</div>
					</div>
					<div class="col-sm-9">
						<!-- User timeline stories -->
						<section class="user-timeline-stories"> <!-- Timeline Story Type: Status -->
						<article class="timeline-story"> <!-- User info --> <header>
						<div class="user-details">
							<h5>身份证号：${user['IdCard'] }</h5>
							<hr />
							<h5>手机号码：${user['phoneNumber'] }</h5>
							<hr />
							<h5>邮箱地址：${user['email'] }</h5>
							<hr />
							<h5>工作单位：${user['workAddress'] }</h5>
							<hr />
							<h5>角色权限：${user['roleName'] }</h5>
							<hr />

						</div>
						<div class="form-group-separator"></div>
						<div class="form-group">
							<a type="button" class="btn btn-info btn-single pull-right"
								id="updatamibao" data-action="trash" style="margin-left: 5px;">修改密保</a>
							<a type="button" class="btn btn-info btn-single pull-right"
								id="updata" data-action="trash" style="margin-left: 5px;">修改密码</a>
							<a type="button" class="btn btn-info btn-single pull-right"
								id="updataInfo" data-action="trash">修改信息</a>

						</div>
						</header> </article> </section>
					</div>
				</div>
				</section>
			</c:forEach>
			<%--页脚 --%>
			<jsp:include page="/WEB-INF/jsps/footer.jsp"></jsp:include>
		</div>
	</div>

	<div class="page-loading-overlay">
		<div class="loader-2"></div>
	</div>

	<script type="text/javascript">
		// Sample Javascript code for this page
		jQuery(document).ready(function($) {

			// Delete Modal-1
			$("#updata").on('click', function() {
				$("#gallery-image-delete-modal1").modal('show');
			});

		});

		// Sample Javascript code for this page
		jQuery(document).ready(function($) {

			// Delete Modal-1 
			$("#updataInfo").on('click', function() {
				var context = $(".fa-home");

				$("#s_province").val(context.eq(0).html());
				change(1);
				$("#s_city").val(context.eq(1).html());
				change(2);
				$("#s_county").val(context.eq(2).html());
				$("#gallery-image-delete-modal2").modal('show');

			});

		});

		// Sample Javascript code for this page
		jQuery(document).ready(function($) {
			$(".datatimepicker1").datetimepicker({
				format : "yyyy-mm-dd",
				autoclose : true,
				todayBtn : true,
				startView : 'year',
				minView : 'month',
				maxView : 'year',
				language : 'zh-CN',
				pickerPosition : "bottom-left"
			});
			// Delete Modal-1
			$("#updatamibao").on('click', function() {
				$("#gallery-image-delete-modal").modal('show');
			});

		});
	</script>

	<!-- Gallery Delete Image (Confirm)-->
	<div class="modal fade" id="gallery-image-delete-modal1"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">修改密码</h4>
				</div>
				<form class="form-horizontal"
					action="<c:url value="/updatePassword.do"/>"
					onsubmit="return modifyPassword();" method="post" name="addForm">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-2 control-label" for="oldPassword">原密码</label>
							<div class="col-sm-10">
								<input type="password" class="form-control" id="oldPassword"
									placeholder="Placeholder" name="oldPassword">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label" for="newPassword">新密码</label>
							<div class="col-sm-10">
								<input type="password" class="form-control" id="newPassword"
									placeholder="Placeholder" name="newPassword">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-2 control-label" for="confirmPassword">确定密码</label>
							<div class="col-sm-10">
								<input type="password" class="form-control" id="confirmPassword"
									placeholder="Placeholder" name="confirmPassword">
							</div>
						</div>
						<font style="color: red; text-align: center;" id="message"></font>
					</div>
					<div class="modal-footer">
						<input type="submit" class="btn btn-white" data-dismiss="modal"
							value="确定" onclick="SendForm();" />
						<button type="button" class="btn btn-danger" data-dismiss="modal">退出</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<!-- 判断输入的两次密码是否一致 -->
	<script type="text/javascript">
		$("#oldPassword").blur(function() {
			 var reg = /^[u4E00-u9FA5]+$/;
			var oldPassword = $.trim($("#oldPassword").val());
			if (oldPassword.length == 0) {
				$("#message").text("原密码不能为空");
				return false;
			}
			return true;
		});
		$("#newPassword").blur(function() {
			var newPassword = $.trim($("#newPassword").val());
			if (newPassword.length == 0) {
				$("#message").text("新密码不能为空");
				return false;
			}
			return true;
		});
		$("#confirmPassword").blur(function() {
			var confirmPassword = $.trim($("#confirmPassword").val());
			var newPassword = $.trim($("#newPassword").val());

			if (confirmPassword.length == 0) {
				$("#message").text("确认密码不能为空");
			} else if (confirmPassword != newPassword) {
				$("#message").text("两次密码不一致");

				return false;
			} else {
				$("#message").text("");
				return true;
			}

		});
		function SendForm() {
			if (modifyPassword()) {
				document.addForm.submit();
			}
		}
		function modifyPassword() {

			var oldPassword = $.trim($("#oldPassword").val());
			if (oldPassword.length == 0) {

				return false;
			}

			var newPassword = $.trim($("#newPassword").val());
			if (newPassword.length == 0) {

				return false;
			}

			var confirmPassword = $.trim($("#confirmPassword").val());

			if (confirmPassword.length == 0) {

				return false;
			} else if (confirmPassword != newPassword) {

				return false;
			}

			return true;
		};
	</script>

	<!-- Gallery Delete Image (Confirm)-->
	<div class="modal fade" id="gallery-image-delete-modal2"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">修改个人信息</h4>
				</div>

				<div class="modal-body">
					<c:forEach items="${data }" var="user">
						<form role="form" class="form-horizontal" onsubmit="return check()" action="/updateInfo.do"
							method="POST">
							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">手机号</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="PhoneNumber"
										name="phoneNumber" value="${user['phoneNumber'] }">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">工作地址</label>
								<div class="col-sm-10">
									<input type="text" class="form-control" id="field-1"
										name="workAddress" value="${user['workAddress'] }">
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">性别</label>
								<div class="col-sm-10">
									<p>

										<label class="radio-inline"> <input type="radio"
											name="sex" id="inlineRadio1" value="1"
											<c:if test="${user['sex'] eq '1' }">checked="checked"</c:if>>
											男
										</label> <label class="radio-inline"> <input type="radio"
											name="sex" id="inlineRadio1" value="2"
											<c:if test="${user['sex'] eq '2' }">checked="checked"</c:if>>
											女
										</label>
									</p>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label">出生日期</label>
								<div class="col-sm-9">
									<input type="text" readonly id="birthdayupdate"
										class="form-control datetimepicker datatimepicker1"
										name="birthday" value="${user['birthday'] }">
								</div>
							</div>
							<script type="text/javascript">
								
							</script>


							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">个人地址</label>
							</div>
							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">省：</label>
								<div class="col-sm-9">
									<select id="s_province" class="form-control" name="s_province"></select>

								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">市：</label>
								<div class="col-sm-9">
									<select id="s_city" class="form-control" name="s_city"></select>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">区：</label>
								<div class="col-sm-9">
									<select id="s_county" class="form-control" name="s_county"
										onchange="showArea()"></select>
								</div>
							</div>

							<div class="form-group">
								<label class="col-sm-2 control-label" for="field-1">详细信息</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="addressInfo"
										value="${user['personAddress'][0] }${user['personAddress'][1]}${user['personAddress'][2] }${user['personAddress'][3]}"
										name="personAddress">
								</div>
							</div>

							<div class="modal-footer">
								<button type="submit" class="btn btn-white">确定</button>
								<button type="button" class="btn btn-danger"
									data-dismiss="modal">退出</button>
							</div>
						</form>
					</c:forEach>
				</div>

			</div>
		</div>
	</div>
	<script type="text/javascript">
		function check(){
			var form = $("#infoForm");
			var phoneNumber = $("#PhoneNumber").val();
			if(!(/^1[3|5][0-9]\d{4,8}$/.test(phoneNumber))){ 
			    alert("不是完整的11位手机号或者正确的手机号前七位"); 
			    return false; 
			}
			var birthday = $("#birthdayupdate").val();
			var array = birthday.split("-");
			var date = new Date();
			if(date.getFullYear()<=array[0]||date.getMonth() + 1<=array[1]||date.getDate()<=array[2]){
				 alert("请正确输入你的生日"); 
				 return false; 
			}
			if($("#s_province").val()=="省份"){
				 alert("请选择省份"); 
				 return false; 
			}
			if($("#s_city").val()=="地级市"){
				 alert("请选择地级市"); 
				 return false; 
			}
			if($("#s_county").val()=="市、县级市"){
				 alert("请选择市、县级市"); 
				 return false; 
			}
			return true;
		}
	</script>
	<!-- Gallery Delete Image (Confirm)-->
	<div class="modal fade" id="gallery-image-delete-modal"
		data-backdrop="static">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">修改密保</h4>
				</div>
				<input type="hidden" id="baseUrl"
					value="${pageContext.request.contextPath}">
				<form class="form-horizontal"
					action="<c:url value='/updateQuestion.do'/>" method="post"
					onsubmit="return submitForm();" name="updateQuestion">
					<div class="modal-body">
						<div class="form-group">
							<label class="col-sm-3 control-label" for="field-1">新密保问题</label>
							<div class="col-sm-9">
								<select class="form-control" id="s2example-1" name="id">
									<option value="1">你父亲的名字</option>
									<option value="2">你小学名字</option>
									<option value="3">小学班主任名字</option>
								</select>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="field-1">原密保答案</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="passwordQuestion"
									placeholder="Placeholder" name="passwordQuestion">
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="field-1">新密保答案</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="newQuestion"
									placeholder="Placeholder" name="newQuestion">
							</div>
						</div>
						<span id="msg" style="color: red; text-align: center;"></span>
					</div>
					<div class="modal-footer">
						<input type="submit" class="btn btn-white" data-dismiss="modal"
							onclick="submitUpdate();" value="确定">
						<button type="button" class="btn btn-danger" data-dismiss="modal">退出</button>
					</div>
				</form>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$("#newQuestion").blur(function() {
			var newQuestion = $.trim($('#newQuestion').val());
			var span = $("#msg");
			span.html("");
			if (newQuestion.length == 0) {
				span.html("新密保答案不能为空");
				return false;
			}

		});
		$("#passwordQuestion").blur(function() {
			var passwordQuestion = $.trim($('#passwordQuestion').val());
			var span = $("#msg");
			span.html("");
			if (passwordQuestion.length == 0) {
				// 得到span元素
				span.html("原密保答案不能为空");
				return false;
			} else {
				$.post($("#baseUrl").val() + "/checkQuestion.do", {
					passwordQuestion : passwordQuestion
				}, function(data) {
					var msg = data.email_msg;
					if (msg == "error") {
						span.html("原密保错误！");
						return false;
					} else {
						span.html("");
						return true;
					}
				});
			}
		});
		function submitForm() {

			var newQuestion = $.trim($('#newQuestion').val());
			var msg = $("#msg").text();

			if (newQuestion.length == 0) {

				return false;
			} else if (msg != "") {

				return false;
			}
			return true;
		}
		function submitUpdate() {
			if (submitForm()) {
				document.updateQuestion.submit();
			}
		}
	</script>
	<%-- 尾部内容 --%>
	<jsp:include page="/WEB-INF/jsps/template_tail.jsp" />

	<script class="resources library" src="assets/js/area.js"
		type="text/javascript"></script>
	<script type="text/javascript">
		_init_area();
	</script>
	<script type="text/javascript">
		var Gid = document.getElementById;

		var showArea = function() {

			var province = $("#s_province").val();
			var city = $("#s_city").val();
			var county = $("#s_county").val();

			$("#addressInfo").val(province + city + county);

		}
	</script>
	<script src="/assets/js/datepicker/bootstrap-datetimepicker.js"></script>
	<script src="/assets/js/datepicker/bootstrap-datetimepicker.zh-CN.js"></script>


</body>

</html>